<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>编辑收货地址</title>
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/edit_address.css">
    <link rel="stylesheet" href="__CSS__/lib/mui.picker.css">
    <link rel="stylesheet" href="__CSS__/lib/mui.poppicker.css">
</head>
<style type="text/css">
body #cityPickerButton{
    padding: 0;
}
</style>
<body>
<div class="topbar-between horizontal-view gradient-color">
    <a href="{$ref}" class="display-inital">
        <div class="topbar-back">
            <div class="topbar-back-icon"></div>
        </div>
    </a>
    <div class="topbar-title">编辑收货地址</div>
    <div class="topbar-right"></div>
</div>
<div class="content-wrap">
    <div class="horizontal-view input-wrap">
        <div class="text-content">收货人：</div>
        <input id="userName" value="{$addr.userName}" class="input-content" type="text" maxlength="20" placeholder="请输入姓名"/>
    </div>
    <div class="horizontal-view input-wrap">
        <div class="text-content">联系电话：</div>
        <input id="userPhone" value="{$addr.userPhone}"  class="input-content" type="tel" maxlength="11" placeholder="请输入手机号码"/>
    </div>
    <div class="horizontal-view input-wrap">
        <div class="text-content">地址：</div>
        <div id="cityPickerButton" class="mui-table-view-cell horizontal-view area-wrap">
            <div id="cityArea" class="input-content">{$addr['address']}</div>
            <!-- <div id="cityArea" class="input-content">{$pr.areaName}{$ci.areaName}{$ar.areaName}</div> -->
            <input type="hidden" id="lng" value="{$addr['lng']}">
            <input type="hidden" id="lat" value="{$addr['lat']}">
            <img src="__IMG__/ic_right.png" width="8" height="15">
        </div>
    </div>
    <div class="horizontal-view input-wrap">
        <div  class="text-content">门牌号：</div>
        <input id="number" value="{$addr.number}" class="input-content" type="text" maxlength="50" placeholder="请输入详细地址"/>
    </div>
</div>
<input type="hidden" id="isrepeat" value="0"/>
<input type="hidden" id="addrid" value="{$addr.addressId|default=0}" />
<div id="save" onclick="saveAddr()" class="position-fixed-bottom" >保存</div>
<script src="__PUBLIC__/js/jquery.min.js"></script>
<script src="__JS__/mui-3.6.1.min.js"></script>
<script src="__JS__/mui.picker.js"></script>
<script src="__JS__/mui.poppicker.js"></script>
<script src="__JS__/jquery2.1.1.min.js"></script>
<script>

$(function(){
        if(localStorage.isrepeat){$("#isrepeat").val(localStorage.isrepeat);}
        if(localStorage.userName){$("#userName").val(localStorage.userName);}
        if(localStorage.userPhone){$("#userPhone").val(localStorage.userPhone);}
        if(localStorage.number){$("#number").val(localStorage.number);}
        if(localStorage.address){$("#cityArea").text(localStorage.address);}
        if(localStorage.lng){$("#lng").val(localStorage.lng);}
        if(localStorage.lat){$("#lat").val(localStorage.lat);}
        localStorage.isrepeat = '';
        localStorage.userName = '';
        localStorage.userPhone = '';
        localStorage.number = '';
        localStorage.lng = '';
        localStorage.lat = '';
        localStorage.ret="";
        localStorage.address = '';
});

$("#cityPickerButton").click(function(){
    localStorage.userName=$("#userName").val();
    localStorage.userPhone=$("#userPhone").val();
    localStorage.number=$("#number").val();
    localStorage.isrepeat=$("#isrepeat").val();
    localStorage.lng=$("#lng").val();
    localStorage.lat=$("#lat").val();
    localStorage.address=$("#cityArea").text();
    localStorage.ret="{$ret}";
    location.href="/Wx/Address/map";
});

    $('input').focus(function(){
        $('.position-fixed-bottom').css('position','static');
    }).blur(function(){
        $('.position-fixed-bottom').css('position','static');
    });

var area = {
'province': {$pr.areaId|default=0},
'city': {$ci.areaId|default=0},
'area': {$ar.areaId|default=0},
};


//点击保存

var url = '/Wx/Address/Add';
var msg = '添加';
//修改
<?php if($addr['addressId']){ ?>
 url = '/Wx/Address/editAddrHandle';
 msg='修改';
<?php } ?>

function saveAddr(){
    var userName = trim(document.getElementById('userName').value);
    var userPhone = trim(document.getElementById('userPhone').value);
    var address = trim($("#cityArea").text());
    var number = trim(document.getElementById('number').value);
    var lng = $("#lng").val();
    var lat = $("#lat").val();
    var province = area.province;
    var cmbCity = area.city;
    var cmbArea = area.area;
    var isrepeat = document.getElementById('isrepeat');
    var telReg = !!userPhone.match(/^1[3|7|4|5|8]{1}\d{9}$/);
    if (userName == '') {
        mui.toast('请输入姓名');
        return;
    }
    if (userPhone == '') {
        mui.toast('请输入手机号');
        return;
    }

    if (telReg == false) {
        mui.toast('手机号码不正确');
        return;
    }
    if (lng == '' || lat == '' || address == '') {
        mui.toast('请选择选择正确的定位');
        return;
    }
    if (number == '') {
        mui.toast('请选择填写门牌号');
        return;
    }
    if(isrepeat.value==1){
        mui.toast('请不要重复提交');
        return;
    }
    isrepeat.value=1;
    mui.post(url,{
        addrid:{$addr['addressId']|default=0},
        userName : userName,
        userPhone : userPhone,
        // areaId1 : province,
        // areaId2 : cmbCity,
        // areaId3 : cmbArea,
        address : address,
        lng : lng,
        lat : lat,
        number : number

    },function(data){
        if (data.status == 0) {
            mui.toast(msg+'成功');
            setTimeout(function() {
            //入口判断

            location.href = "{$ref}";


            }, 1000);
        }else if(data.status == -3){
            isrepeat.value=0;
            mui.toast('请先登录');
            return;
        } else {
            isrepeat.value=0;
            mui.toast(msg+'失败');
        }
    },'json');
}



    //去左右空格
    function trim(str){
        return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
    }

    //选择省市区
    // (function ($, doc) {
    //     $.init();
    //     $.ready(function() {
    //         /**
    //          * 获取对象属性的值
    //          * @param {Object} obj 对象
    //          * @param {String} param 属性名
    //          */
    //         var _getParam = function (obj, param) {
    //             return obj[param] || '';
    //         };

    //         var cityPicker = new $.PopPicker({
    //             layer: 3
    //         });
    //         cityPicker.setData([
    //         <foreach name="area" item="province">

    //         {
    //             value: {$province['areaId']},
    //             text: "{$province['areaName']}",

    //             children: [
    //             <foreach name="province['children']" item="city">
    //             {
    //                 value: {$city['areaId']},
    //                 text: "{$city['areaName']}",

    //                 children:[
    //                 <foreach name="city['children']" item="area3">
    //                 {

    //                     value: {$area3['areaId']},
    //                     text: "{$area3['areaName']}",

    //                 },
    //                 </foreach>
    //                 ]

    //             },
    //             </foreach>
    //             ]
    //         },
    //         </foreach>
    //         ]);
    //         var showCityPickerButton = doc.getElementById('cityPickerButton');
    //         var cityArea = doc.getElementById('cityArea');
    //         //回调函数
    //         showCityPickerButton.addEventListener('tap', function(event) {
    //             cityPicker.show(function(items) {

    //                 cityArea.innerText = _getParam(items[0], 'text') + "" + _getParam(items[1], 'text') + "" + _getParam(items[2], 'text');
    //                 area.province = _getParam(items[0], 'value');
    //                 area.city = _getParam(items[1], 'value');
    //                 area.area = _getParam(items[2], 'value');
    //             });
    //         }, false);
    //     });
    // })(mui, document);
</script>
</body>
</html>